<template>
  <div >
      <nav-bar>
          <template v-slot:left>
              <div class="back" @click="backClick">
                  <img src="~assets/img/common/back.svg" alt="">
                </div>
            </template>   
          <template v-slot:center>
              <div class="center">
                  <div v-for="(item,index) in titles" :key=index class="titles"
                  :class="{active:index===currentIndex}"
                  @click="titleClick(index)">
                      {{item}}
                  </div>
              </div>
            </template>
      </nav-bar>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar"
export default {
  components: {
      NavBar 
  },
  props: {},
  data() {
    return {
        titles:['商品','参数','评论','推荐'],
        currentIndex:0
    };
  },
  watch: {},
  computed: {},
  methods: {
      titleClick(index) {
          this.currentIndex=index
      },
      backClick() {
          this.$router.go(-1)
      }
  },
  created() {},
  mounted() {}
};
</script>
<style  scoped>
.center {
    display: flex;
}
.titles {
    flex:1;
    font-size: 12px;
    color: black;
}
.active {
    color: var(--color-tint);
}

.back img {
    margin-top: 10px;
    margin-left: 20px;
}
</style>